<template>
  <div class="main">
    <div class="sider">
      <van-collapse v-model="active" :border="false" accordion>
        <template v-for="item of categories" :key="item.id">
          <van-collapse-item :title="item.name" :name="item.id" :border="false">
            <van-sidebar
              v-model="activeChild"
              v-if="item.children"
              style="width: 100%"
            >
              <template v-for="child of item.children" :key="child.id">
                <van-sidebar-item
                  :title="child.name"
                  @click="handleSide(child.id)"
                ></van-sidebar-item>
              </template>
            </van-sidebar>
          </van-collapse-item>
        </template>
      </van-collapse>
    </div>
    <div class="body">
      <template v-if="bygood && bygood.length > 0">
        <div class="box" v-for="item of bygood" :key="item.id">
          <van-row>
            <van-col :span="8">
              <van-image :src="item.cover_url" :height="80" :width="80" />
            </van-col>
            <van-col class="info" :span="16">
              <div>{{item.title}}</div>
              <div>出售:{{item.sales}} 收藏:{{item.collects_count}} 评论:{{item.comments_count}}</div>
              <div>￥{{item.price}}</div>
            </van-col>
          </van-row>
        </div>
      </template>
      <template v-else> meiyou </template>
    </div>
  </div>
</template>

<script>
import { getGoods } from "@/api/goods";
import { onMounted, reactive, toRefs, ref, computed } from "vue";
export default {
  name: "classify",
  setup() {
    let active = ref(1);
    let activeChild = ref(0);
    let data = reactive({
      ready: false,
      goods: {},
      categories: {},
    });
    const handleSide = (id) => {
      activeChild.value = id;
      console.log(activeChild.value);
    };
    const bygood = computed(() => {
      let by = data.goods;
      return (
        Array.isArray(by.data) &&
        by.data.filter((item) => item.category_id == activeChild.value)
      );
    });

    onMounted(() => {
      getGoods().then((res) => {
        const { goods, categories } = res;
        data.ready = true;
        data.goods = goods;
        data.categories = categories;
        console.log("data.goods", bygood.value);
      });
    });

    return {
      ...toRefs(data),
      active,
      bygood,
      activeChild,
      handleSide,
    };
  },
};
</script>

<style lang="scss" scoped>
.main {
  display: flex;
  flex: 1;
  .sider {
    width: 40vw;
    background-color: #fff;
    min-height: calc(100vh - 96px);
  }
  .body {
    flex: 1;
    padding: 5px;
    .box {
      width: 100%;
      margin-bottom: 5px;
      background-color: #fff;
      .info{
          >div{
              &:first-of-type{
                  font-size: 14px;
                  line-height: 20px;
                  margin-top: 5px;
              }
              &:nth-of-type(2){
                  font-size: 12px;
                  line-height: 18px;
                  color: #646566;
                  text-indent: 6px;
              }
              &:last-of-type{
                  font-size: 14px;
                  text-align: right;
                  color: red;
                  margin-right: 10px;
                  margin-top: 10px;
              }
          }
      }
    }
  }
}
</style>